<?php
require_once 'login.php';
echo <<<_END

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js map-page"> <!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Photogrammar: Advanced Search Results</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/css/styleMain.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 
<link href="select2/select2.css" rel="stylesheet"/>
<style>
div.select2-result-label, .select2-choice, .select2-searching, .select2-no-results {font-family:sans-serif;}
</style>
<script src="select2/select2.js"></script>
    
    <script>
    
            $('document').ready(function(){
 

     
                $("#pname").select2({
               	 placeholder: "Choose a Photographer",
			   	 allowClear: true
			   	 });

			    $('#state').select2({
               	 placeholder: "Choose a State",
			   	 allowClear: true
			   	 }).on("change", function() {
			   	 		
		   	 		
		   	 		 $("#county").select2('val', ''); 
		   	 		 $("#city").select2('val', '');
	
				   	 $('#county').select2({allowClear: true,
				   	 placeholder: "Choose a County",
					    ajax: {
					      url: "counties.php",
					      dataType: 'json',
					      data: function (term, page) {
					        return {
					          state: $('#state').val()
					        };
					      },
					      results: function (data, page) {
					        return { results: data };
					      }
					    }
						}).on("change", function() {
							$("#city").select2('val', '');
						});
						
				   	 $('#city').select2({allowClear: true,
					   	 placeholder: "Choose a City",
						    ajax: {
						      url: "cities.php",
						      dataType: 'json',
						      data: function (term, page) {
						        return {
						          state: $('#state').val(),
								  county: $('#county').val(),
						        };
						      },
						      results: function (data, page) {
						        return { results: data };
						      }
						    }
						    
							});
						
					});
			    
			     
			    });
			   
       </script>
    
    <script type="text/javascript">
        $(function() 
        {
                $('#content-wrapper') .css({'height': (($(window).height()) - 230)+'px'});
            
                $(window).bind('resize', function(){
                    $('#content-wrapper') .css({'height': (($(window).height()) - 230)+'px'});
                });
        });

    </script>

</head>
<body>

<div id="wrapper" class="clearfix">

<div id="header" class="clearfix">
	<div id="logo">
    	<h1><a href="/"><img src="/images/photogrammar-wordmark.jpg" alt="Yale Photogrammar" title="Yale Photogrammar" /></a></h1>
    </div><!-- /#logo -->
    <nav id="menu" class="menu">
        <ul>
          <li class="single-link">
            <a href="/index.php">Home</a>
            </li>
          <li class="single-link">
            <a href="/map/">Map</a>
            </li>
          <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
            <a href="/browse/">Browse</a>
            </li>
          <li class="current"><!-- Using class="single-link" for links with no dropdown -->
            <a href="/search/">Search</a>
            </li>
          <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
            <a href="/about/">About</a>
            </li>
          <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
            <a href="/blog/">Blog</a>
            </li>
        </ul>
    </nav><!-- /#menu -->
</div><!-- /#header -->

<div id="content-wrapper" class="clearfix">

<div id="search-content">

<h2 class="page-title">Search</h2>

_END;

$db_server = mysql_connect($db_hostname, $db_username, $db_password);

if(!$db_server) die("Unable to connect to MySQL: " .mysql_error());

mysql_select_db($db_database) or die('Unable to connect to MySQL: ' . mysql_error());

$fval = array('pname'=>'', 'month_start'=>'', 'month_stop'=>'', 'year_start'=>'', 'year_stop'=>'', 'van'=>'', 'lot'=>'', 'city'=>'', 'county'=>'', 'state'=>'', 'title'=>'', 'start'=>0);

echo <<<_END

<form action='results.php' method='get'>
<input type ="hidden" id="start" name="start" value=0>
<div id="search-full" class="search-row">
	<div class="search-label">
    	<h3>Full Text</h3>
    </div>
    <div class="search-field">
    	<input type ="text" name="search"/>
    </div>
</div><!--/#search-full-->

<div id="search-photographer" class="search-row">
	<div class="search-label">
    	<h3>Photographer</h3>
    </div>
    <div class="search-field">
     <select id="pname" name="pname" style="width:400px;">
_END;
    $pnamequery = "SELECT DISTINCT pname FROM photo2 ORDER BY pname ASC";
	$pnameresult = mysql_query($pnamequery) or die(mysql_error());
	while($row = mysql_fetch_array($pnameresult)){
		echo "<option value=\"" . $row['pname'] . "\">" . $row['pname'] . "</option>";
		}
echo <<<_END
 
   	</select>
    </div>
           
</div><!--/#search-photographer-->

<div id="search-lot" class="search-row">
	<div class="search-label">
    	<h3>Lot Number</h3>
    </div>
    <div class="search-field">
    	<input type ="text" name="lot"/>
    </div>
     <br><div style="margin-left:190px;width:600px;color:grey;font-size:.8em;font-family:sans-serif;">88,000 photographs were assigned a lot number, indicating a set of photographs organized primarily around a shooting assignment. As a result, lots tend to feature one photographer&rsquo;s set of photographs in a single place. For example, <a style="color:black;" href="/search/results.php?start=0&search=&pname=&lot=1070&van=&state=&county=&city=&year_start=1935&month_start=1&year_stop=1945&month_stop=12">Lot 1070</a> features Arthur Rothstein&rsquo;s set in Clinton, Indiana in February 1940.  Paul Vanderbilt developed the lot system. </div>

</div><!--/#search-lot-->

<div id="search-classification" class="search-row">
    <div class="search-label">
    	<h3>Classification Tags</h3>
    </div>
    <div class="search-field">
        <select name="van">
            <option value="" selected>ALL</option>
            <option value="CLand">THE LAND - General - Land</option>
            <option value="CPanoramas">THE LAND - General - Panoramas</option>
            
            <option value="CWheels">ALPHABETICAL SECTION - General - Wheels</option>
        </select>
    </div><!--/.search-field-->
   <br><div style="margin-left:190px;width:600px;color:grey;font-size:.8em;font-family:sans-serif;">88,000 photographs in the collection have tags assigned.  There are twelve main subject headings (ex. THE LAND) and 1300 sub-headings (ex. Mountains, Deserts, Foothills, Plains).   Paul Vanderbilt began to develop the classification system in 1942. </div>
</div><!--/#search-classification-->

<div id="search-place">
    <div id="search-state" class="search-row">
        <div class="search-label">
            <h3>State</h3>
        </div>
        <div class="search-field">
     <select id="state" name="state" style="width:400px;">
_END;
    $statequery = "SELECT DISTINCT state FROM photo2 ORDER BY state ASC";
	$stateresult = mysql_query($statequery) or die(mysql_error());
	while($row = mysql_fetch_array($stateresult)){
		echo "<option value=\"" . $row['state'] . "\">" . $row['state'] . "</option>";
		}
echo <<<_END
 
   	</select>        
   	</div>
    </div><!--/#search-state-->
    <div id="search-county" class="search-row">
    	<div class="search-label">
        	<h3>County</h3>
    	</div>
        <div class="search-field">
        	<input id="county" type="hidden" data-placeholder="Choose a County" style="width:400px;" name="county"/>        	
        </div>
    </div><!--/#search-county-->
    <div id="search-city" class="search-row">
    	<div class="search-label">
        	<h3>City</h3>
        </div>
        <div class="search-field">
    		        	<input id="city" type="hidden" data-placeholder="Choose a City" style="width:400px;" name="city"/>

        </div>
    </div><!--/#search-city-->
</div><!--/#search-place-->

<div id="search-year" class="search-row">
    <div class="search-label">
        <h3>From</h3>
    </div>
    <div class="search-field">
        <select name="year_start"> 
            <option value=1935 selected>1935</option>
            <option value=1936>1936</option>
            <option value=1937>1937</option>
            <option value=1938>1938</option>
            <option value=1939>1939</option>
            <option value=1940>1940</option>
            <option value=1941>1941</option>
            <option value=1942>1942</option>
            <option value=1943>1943</option>
            <option value=1944>1944</option>
            <option value=1945>1945</option>
    	</select>
    	<span> / </span>
        <select name="month_start"> 
            <option value=1 selected>January</option>
            <option value=2>February</option>
            <option value=3>March</option>
            <option value=4>April</option>
            <option value=5>May</option>
            <option value=6>June</option>
            <option value=7>July</option>
            <option value=8>August</option>
            <option value=9>September</option>
            <option value=10>October</option>
            <option value=11>November</option>
            <option value=12>December</option>
        </select>
    </div>
</div><!--/#search-year-->
<div id="search-month" class="search-row">
    <div class="search-label">
    	<h3>To</h3>
    </div>
    <div class="search-field">
        <select name="year_stop"> 
            <option value=1935>1935</option>
            <option value=1936>1936</option>
            <option value=1937>1937</option>
            <option value=1938>1938</option>
            <option value=1939>1939</option>
            <option value=1940>1940</option>
            <option value=1941>1941</option>
            <option value=1942>1942</option>
            <option value=1943>1943</option>
            <option value=1944>1944</option>
            <option value=1945 selected>1945</option>
        </select>
        <span> / </span>
        <select name="month_stop"> 
            <option value=1 selected>January</option>
            <option value=2>February</option>
            <option value=3>March</option>
            <option value=4>April</option>
            <option value=5>May</option>
            <option value=6>June</option>
            <option value=7>July</option>
            <option value=8>August</option>
            <option value=9>September</option>
            <option value=10>October</option>
            <option value=11>November</option>
            <option value=12 selected>December</option>
        </select>
    </div>
</div><!--/#search-month-->

<div id="search-button">
	<button type='submit' value='Search'/>Search</button>
</div><!--/#search-button-->

</form>

_END;


mysql_close($db_server);

function get_post($var)
{
    return mysql_real_escape_string($_GET[$var]);
}

echo <<<_END

</div><!--/#search-content-->

</div><!--/#content-wrapper-->

<div id="footer" class="clearfix">
	<div id="institution-logo" class="footer-logo"><a href="http://www.yale.edu>"><img src="/images/yale-wordmark.jpg"></a></div>
    <div id="partner-logo-01" class="footer-logo"><a href="http://www.neh.gov/divisions/odh"><img src="/images/neh-logo.jpg"></a></div>
</div><!--/footer -->

</div><!--/#wrapper-->

</body>

</html>
_END;

?>
